<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta property="og:title" content="七安的博客🎉" />
    <meta
      property="og:description"
      content="🐰七安的博客，分享一些有用的工具，技术"
    />
    <meta property="og:url" content="http://1.94.13.125/index.html" />

    <title>七安的博客</title>
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐰</text></svg>"
      type="image/svg+xml"
    />

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      // 配置 Tailwind 暗色主题
      tailwind.config = {
        darkMode: 'class',
        theme: {
          extend: {
            colors: {
              dark: '#1a1a1a',
              light: '#f5f5f5',
            },
          },
        },
      }
    </script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/remixicon/3.5.0/remixicon.css"
    />
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" /> -->
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

      :root {
        --bg-gradient-light: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        --bg-gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
      }

      body {
        font-family: 'Noto Sans SC', sans-serif;
        transition: all 0.3s ease;
        background: #ffffff;
      }
      body.dark {
        background: var(--bg-gradient-dark);
        color: #ffffff;
      }

      body:not(.dark) {
        background: var(--bg-gradient-light);
        color: #1a1a1a;
      }

      .glass-card {
        transition: all 0.3s ease;
      }

      .dark .glass-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
      }

      body:not(.dark) .glass-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(59, 130, 246, 0.1);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
          0 2px 4px -1px rgba(0, 0, 0, 0.03);
      }

      .hover-scale {
        transition: transform 0.3s ease;
      }

      .hover-scale:hover {
        transform: scale(1.05);
      }

      /* 主题切换按钮样式 */
      .theme-toggle {
        position: fixed;
        right: 1.5rem;
        top: 0.8rem;
        z-index: 60;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        line-height: 1; /* 添加这行来修复图标垂直对齐 */
      }

      .theme-toggle i {
        display: flex; /* 添加这个样式块来确保图标居中 */
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }

      .dark .theme-toggle {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #ffffff;
      }

      body:not(.dark) .theme-toggle {
        background: rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.2);
        color: #1a1a1a;
      }

      .theme-toggle:hover {
        transform: scale(1.1);
      }

      /* 左侧导航栏样式 */
      .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 200px;
        background: var(--bg-gradient-dark);
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        padding: 2rem 1.5rem;
        z-index: 50;
        transition: all 0.3s ease;
      }

      .sidebar-toggle {
        display: none; /* 默认隐藏，在小屏幕下显示 */
        position: absolute;
        right: -12px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background: var(--bg-gradient-dark);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 51;
      }

      body:not(.dark) .sidebar-toggle {
        background: var(--bg-gradient-light);
        border: 1px solid rgba(0, 0, 0, 0.2);
      }

      .sidebar-toggle:hover {
        transform: translateY(-50%) scale(1.1);
      }

      /* 侧边栏收起状态 */
      .sidebar.collapsed {
        transform: translateX(-180px);
      }

      .sidebar.collapsed + .main-content {
        margin-left: 0;
      }

      .sidebar.collapsed ~ .topbar {
        left: 0;
      }

      .sidebar-toggle i {
        transition: transform 0.3s ease;
      }

      .sidebar.collapsed .sidebar-toggle i {
        transform: rotate(180deg);
      }

      body:not(.dark) .sidebar {
        background: var(--bg-gradient-light);
        border-right: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.03);
      }

      .main-content {
        margin-left: 200px;
        transition: margin-left 0.3s ease;
      }

      @media (max-width: 768px) {
        .sidebar {
          width: 80%;
          margin-left: -80%;
        }

        .sidebar.collapsed {
          margin-left: -80%;
        }

        .sidebar.collapsed + .main-content {
          margin-left: 0;
        }

        .sidebar-toggle {
          display: flex;
        }

        .main-content {
          margin-left: 0;
        }

        .topbar {
          left: 0;
        }

        .nav-menu {
          flex-direction: column;
          align-items: flex-start;
        }

        .nav-item {
          width: 100%;
        }

        .dropdown-menu {
          left: 0;
          width: 100%;
        }

        .container {
          padding: 0 1rem;
        }

        .grid-cols-1,
        .md:grid-cols-2,
        .lg:grid-cols-3 {
          grid-template-columns: 1fr;
        }

        .text-5xl {
          font-size: 2.5rem;
        }

        .text-2xl {
          font-size: 1.5rem;
        }

        .text-xl {
          font-size: 1.25rem;
        }

        .text-lg {
          font-size: 1.125rem;
        }

        .text-sm {
          font-size: 0.875rem;
        }
      }

      .nav-link {
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
      }

      .nav-link:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      body:not(.dark) .nav-link:hover {
        background: rgba(0, 0, 0, 0.05);
      }

      .nav-link i {
        margin-right: 0.75rem;
      }

      .topbar {
        position: fixed;
        top: 0;
        right: 0;
        left: 200px;
        height: 60px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        z-index: 40;
        display: flex;
        align-items: center;
        padding: 0 2rem;
        transition: all 0.3s ease;
      }

      @media (max-width: 768px) {
        .topbar {
          left: 0;
        }
      }

      .dark .topbar {
        background: rgba(26, 26, 26, 0.95);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .nav-menu {
        display: flex;
        gap: 2rem;
      }

      @media (max-width: 768px) {
        .nav-menu {
          flex-direction: column;
          align-items: flex-start;
        }
      }

      .nav-item {
        position: relative;
      }

      .nav-item > a {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        color: #666;
        transition: all 0.3s ease;
      }

      .dark .nav-item > a {
        color: #999;
      }

      .nav-item:hover > a {
        color: #3b82f6;
      }

      .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
        background: white;
        border-radius: 0.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
        padding: 0.5rem 0;
      }

      @media (max-width: 768px) {
        .dropdown-menu {
          left: 0;
          width: 100%;
        }
      }

      .dark .dropdown-menu {
        background: #1a1a1a;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
      }

      .nav-item:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .dropdown-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        color: #666;
        transition: all 0.3s ease;
      }

      .dark .dropdown-item {
        color: #999;
      }

      .dropdown-item:hover {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
      }

      /* 调整主内容区域的上边距 */
      .main-content {
        padding-top: 60px;
      }

      @media (max-width: 768px) {
        .main-content {
          padding-top: 60px;
        }
      }
    </style>
  </head>
  <body class="min-h-screen">
    <nav class="topbar">
      <div class="nav-menu">
        <div class="nav-item">
          <a href="#">
            <i class="ri-article-line"></i>
            其他博客
            <i class="ri-arrow-down-s-line"></i>
          </a>
          <div class="dropdown-menu">
            <a
              href="https://blog.csdn.net/qq_43682422?type=lately"
              target="_blank"
              class="dropdown-item"
            >
              <i class="ri-code-box-line"></i>
              CSDN
            </a>
            <a
              href="https://juejin.cn/user/1209932880283655"
              target="_blank"
              class="dropdown-item"
            >
              <i class="ri-book-2-line"></i>
              掘金
            </a>
          </div>
        </div>

        <div class="nav-item">
          <a href="#">
            <i class="ri-git-repository-line"></i>
            代码仓库
            <i class="ri-arrow-down-s-line"></i>
          </a>
          <div class="dropdown-menu">
            <a
              href="https://gitee.com/icy_akuya"
              target="_blank"
              class="dropdown-item"
            >
              <i class="ri-git-repository-fill"></i>
              Gitee
            </a>
            <a
              href="https://github.com/icy-goodlike"
              target="_blank"
              class="dropdown-item"
            >
              <i class="ri-github-fill"></i>
              GitHub
            </a>
          </div>
        </div>

        <div class="nav-item">
          <a href="#">
            <i class="ri-links-line"></i>
            友链
            <i class="ri-arrow-down-s-line"></i>
          </a>
          <div class="dropdown-menu">
            <a href="https://z.wiki/tech/" class="dropdown-item">
              <i class="ri-user-smile-line"></i>
              敖武的博客
            </a>
          </div>
        </div>

        <div class="nav-item">
          <a href="#">
            <i class="ri-tools-line"></i>
            工具
            <i class="ri-arrow-down-s-line"></i>
          </a>
          <div class="dropdown-menu">
            <a
              href="https://playground.z.wiki/img-cloud/index.html"
              class="dropdown-item"
            >
              <i class="ri-image-line"></i>
              敖武的图床
            </a>
            <a
              href="https://www.yuque.com/dashboard"
              target="_blank"
              class="dropdown-item"
            >
              <i class="ri-book-2-line"></i>
              阿里语雀
            </a>
            <a href="https://raepa.com/" target="_blank" class="dropdown-item">
              <i class="ri-global-line"></i>
              科学上网
            </a>
            <a
              href="https://chat.openai.com"
              target="_blank"
              class="dropdown-item"
            >
              <i class="ri-robot-line"></i>
              ChatGPT
            </a>
            <a
              href="https://www.figma.com"
              target="_blank"
              class="dropdown-item"
            >
              <i class="ri-layout-line"></i>
              Figma
            </a>
          </div>
        </div>

        <div class="nav-item">
          <a href="#">
            <i class="ri-tools-line"></i>
            学习
            <i class="ri-arrow-down-s-line"></i>
          </a>
          <div class="dropdown-menu">
            <a
              href="https://www.yuque.com/baiyueguang-rfnbu/tr4d0i"
              target="_blank"
              class="dropdown-item"
            >
              <i class="ri-book-3-line"></i>
              前端灵题库
            </a>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主题切换按钮 -->
    <button class="theme-toggle" id="themeToggle">
      <i class="ri-sun-line text-xl"></i>
    </button>

    <!-- 左侧导航栏 -->
    <nav class="sidebar glass-card">
      <button class="sidebar-toggle" id="sidebarToggle">
        <i class="ri-arrow-left-s-line text-xl"></i>
      </button>
      <div class="mb-8">
        <h1 class="text-2xl font-bold">Blog</h1>
      </div>
      <div class="space-y-2">
        <a href="#" class="nav-link">
          <i class="ri-home-line"></i>
          <span>首页</span>
        </a>
        <a href="#" class="nav-link">
          <i class="ri-article-line"></i>
          <span>文章</span>
        </a>
        <a href="#" class="nav-link">
          <i class="ri-user-line"></i>
          <span>关于</span>
        </a>
        <a href="#" class="nav-link">
          <i class="ri-mail-line"></i>
          <span>联系</span>
        </a>
      </div>
      <div class="mt-8 pt-8 border-t border-gray-700">
        <h2 class="text-lg font-semibold mb-4">分类</h2>
        <div class="space-y-2">
          <a href="#" class="nav-link">
            <i class="ri-code-line text-blue-400"></i>
            <span>技术</span>
          </a>
          <a href="#" class="nav-link">
            <i class="ri-heart-line text-green-400"></i>
            <span>生活</span>
          </a>
          <a href="#" class="nav-link">
            <i class="ri-think-line text-purple-400"></i>
            <span>思考</span>
          </a>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 主页横幅 -->
      <header class="pt-32 pb-20 px-6">
        <div class="container text-center" data-aos="fade-up">
          <h1 class="text-5xl font-bold mb-6">🎉七安的博客🎉</h1>
          <p class="text-xl text-gray-500 dark:text-gray-300 mb-8">
            分享技术，记录生活
          </p>
          <button
            class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-full transition-colors"
          >
            开始阅读
          </button>
        </div>
      </header>

      <!-- 文章卡片区 -->
      <section class="py-20 px-6">
        <div
          class="container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          <!-- 文章卡片 1 -->
          <article class="glass-card p-6 hover-scale" data-aos="fade-up">
            <div class="mb-4">
              <span class="text-blue-400">#技术</span>
            </div>
            <h2 class="text-2xl font-bold mb-4">构建现代化Web应用</h2>
            <p class="text-gray-500 dark:text-gray-300 mb-4">
              探索最新的前端技术栈和开发实践...
            </p>
            <div class="flex items-center text-sm text-gray-400">
              <i class="ri-time-line mr-2"></i>
              <span>2025-04-28</span>
            </div>
          </article>

          <!-- 文章卡片 2 -->
          <article
            class="glass-card p-6 hover-scale"
            data-aos="fade-up"
            data-aos-delay="100"
          >
            <div class="mb-4">
              <span class="text-green-400">#生活</span>
            </div>
            <h2 class="text-2xl font-bold mb-4">我的2025计划</h2>
            <p class="text-gray-500 dark:text-gray-300 mb-4">
              新的一年，新的开始，让我们一起...
            </p>
            <div class="flex items-center text-sm text-gray-400">
              <i class="ri-time-line mr-2"></i>
              <span>2025-04-28</span>
            </div>
          </article>

          <!-- 文章卡片 3 -->
          <article
            class="glass-card p-6 hover-scale"
            data-aos="fade-up"
            data-aos-delay="200"
          >
            <div class="mb-4">
              <span class="text-purple-400">#思考</span>
            </div>
            <h2 class="text-2xl font-bold mb-4">技术人的成长之路</h2>
            <p class="text-gray-500 dark:text-gray-300 mb-4">
              关于技术学习和职业发展的一些思考...
            </p>
            <div class="flex items-center text-sm text-gray-400">
              <i class="ri-time-line mr-2"></i>
              <span>2025-04-28</span>
            </div>
          </article>
        </div>
      </section>
    </div>

    <script>
      // 初始化 AOS 动画库
      AOS.init({
        duration: 800,
        once: true,
      })

      // 主题切换功能
      const themeToggle = document.getElementById('themeToggle')
      const body = document.body
      const icon = themeToggle.querySelector('i')

      // 检查本地存储中的主题设置，默认使用亮色主题
      const theme = localStorage.getItem('theme') || 'light'
      body.classList.toggle('dark', theme === 'dark')
      updateIcon()

      themeToggle.addEventListener('click', () => {
        body.classList.toggle('dark')
        const isDark = body.classList.contains('dark')
        localStorage.setItem('theme', isDark ? 'dark' : 'light')
        updateIcon()
      })

      function updateIcon() {
        const isDark = body.classList.contains('dark')
        icon.className = isDark ? 'ri-sun-line text-xl' : 'ri-moon-line text-xl'
      }

      // 侧边栏收起功能
      const sidebarToggle = document.getElementById('sidebarToggle')
      const sidebar = document.querySelector('.sidebar')

      // 检查本地存储中的侧边栏状态
      const sidebarState = localStorage.getItem('sidebarState') || 'expanded'
      if (sidebarState === 'collapsed') {
        sidebar.classList.add('collapsed')
      }

      sidebarToggle.addEventListener('click', () => {
        sidebar.classList.toggle('collapsed')
        const isCollapsed = sidebar.classList.contains('collapsed')
        localStorage.setItem(
          'sidebarState',
          isCollapsed ? 'collapsed' : 'expanded'
        )
      })
    </script>
  </body>
</html>
